<template>
	<!-- 列表组件，还没用到 -->
	<ul class="list">
		<li
			v-for="(item,index) in list" 
			:key="item.id" 
			class="item" 
			@mouseenter="inner($event, index)" 
			@mouseleave="outer($event, index)"
			>
			<router-link :to="item.to">{{item.text}}</router-link>
			<div class="num" v-if="item.num">{{item.num}}</div>
		</li>
	</ul>
</template>

<script>
export default{
	props:{
		list:{
			type: Array,
			required: true
		}
	},
	methods:{
		inner(e, index){
			this.$emit('inner', e.target, index);
		},
		outer(e, index){
			this.$emit('outer', e.target, index);
		}
	}
}
</script>

<style scoped lang="less">
.list{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 36px;
	.item{
		position: relative;
		margin-left: 12px;
		height: 36px;
		line-height: 36px;
		a{
			display: block;
			width: 100%;
			height: 100%;
			cursor: pointer;
			font-size: 14px;
			white-space: nowrap;
		}
		.num{
			position: absolute;
			top: -5px;
			right: -10px;
			min-width: 16px;
			height: 16px;
			line-height: 16px;
			padding: 0 3px;
			border-radius: 8px;
			font-size: 12px;
			text-align: center;
			color: #fff;
			z-index: 30;
			background-color: #FA5A57;
			box-sizing: border-box;
		}
	}
}
</style>
